<!doctype html>
<html lang="zh-CN">
<head><meta name="generator" content="Hexo 3.8.0">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=11,IE=10,IE=9,IE=8">
    <meta name="baidu-site-verification" content="dIcXMeY8Ya">
    
    <title>vue常用指令的学习笔记 | 墨染红尘</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="keywords" content="三更编程, JAVA, 算法, 后端开发">
    <meta name="description" content="菜豆个人博客">

    
    <link rel="alternative" href="/atom.xml" title="墨染红尘" type="application/atom+xml">
    
    
    <link rel="shortcut icon" href="/blog/logo.png">
    
    <link rel="stylesheet" href="/blog/css/style.css">
    <!--[if lt IE 9]>
    <script src="/blog/js/html5.js"></script>
    <![endif]-->
    
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "//hm.baidu.com/hm.js?fd459238242776d173cdc64918fb32f2";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>


</head>
</html>
<body class="home">
    <!--[if lt IE 9]>
    <div class="browsehappy">
        当前网页 <strong>不支持</strong>
        你正在使用的浏览器. 为了正常的访问, 请 <a href="http://browsehappy.com/">升级你的浏览器</a>.
    </div>
    <![endif]-->

    <!-- 博客头部 -->
    <header class="header">
    <section class="container header-main">
        <div class="logo">
            <a href="/blog/">
                <div class="cover">
                    <span class="name">墨染红尘</span>
                    <span class="description">堇色流年·追梦少年</span>
                </div>
            </a>
        </div>
        <div class="dropnav icon-paragraph-justify" id="JELON__btnDropNav"></div>
        <ul class="menu hidden" id="JELON__menu">
            
            <li rel="/blog/2019/05/20/Vue/1-常用指令/index.html" class="item ">
                <a href="/blog/" title="首页" class="icon-home">&nbsp;首页</a>
            </li>
            
        </ul>
        <div class="profile clearfix">
            <div class="feeds fl">
                
                
                <p class="links">
                    
                        <a href="https://github.com/fxiaoyu97" target="_blank">Github</a>
                        |
                    
                        <a href target="_blank">Hosted by Coding Pages</a>
                        
                    
                </p>
                <p class="sns">
                    
                    <a href="javascript: void(0);" class="wechat">
                        <b>■</b>
                        公众号
                        <span class="popover">
                            <img src="/blog/img/wechat_mp.jpg" width="120" height="120" alt="我的微信订阅号">
                            <i class="arrow"></i>
                        </span>
                    </a>
                </p>
                
            </div>
            <div class="avatar fr">
                <img src="/blog/img/avatar.jpg" alt="avatar" title="Jelon">
            </div>
        </div>
    </section>
</header>


    <!-- 博客正文 -->
    <div class="container body clearfix">
        <section class="content">
            <div class="content-main widget">
                <!-- 文章页 -->
<!-- 文章 -->
<article class="post article">
    <header class="text-center">
        <h3 class="post-title"><span>vue常用指令的学习笔记</span></h3>
    </header>
    <p class="post-meta text-center">
        Calos 发表于
        <time datetime="2019-05-19T16:00:00.000Z">2019-05-20</time>
    </p>
    <div class="post-content">
        <h2 id="v-cloak"><a href="#v-cloak" class="headerlink" title="v-cloak"></a>v-cloak</h2><p>  代码覆盖样式的设置，网页加载速度过慢，页面渲染未完成时会显示vue的代码,用这个指令可以隐藏，这也称作解决插值表达式闪烁的问题。<br>  插值表达式只会替换自己的占位符，不会把整个元素的内容清空。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined">    [v-cloak]:&#123;</span></span><br><span class="line"><span class="undefined">        display: none;</span></span><br><span class="line"><span class="undefined">    &#125;</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span> <span class="attr">v-cloak</span>&gt;</span>&#123;&#123; message &#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="v-text"><a href="#v-text" class="headerlink" title="v-text"></a>v-text</h2><ol>
<li>默认情况下，渲染标签内容，会v-text是没有闪烁问题的。</li>
<li>会覆盖元素中原内容，但是HTML源代码会原样显示</li>
</ol>
<h2 id="v-html"><a href="#v-html" class="headerlink" title="v-html"></a>v-html</h2><p>渲染标签内容，HTML代码会加载以后显示。不会显示原代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">p</span> <span class="attr">v-text</span>=<span class="string">"message"</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">p</span> <span class="attr">v-html</span>=<span class="string">"message"</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> test= <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">				el: <span class="string">'#app'</span>,</span></span><br><span class="line"><span class="undefined">				data:&#123;</span></span><br><span class="line"><span class="xml">					message: '<span class="tag">&lt;<span class="name">h1</span>&gt;</span>Hello Vue.js!<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>'</span></span><br><span class="line"><span class="undefined">				&#125;</span></span><br><span class="line"><span class="undefined">			&#125;)</span></span><br><span class="line"><span class="undefined">		</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>结果如下所示：</strong></p>
<p><img src="\blog\img\vue\1.png" alt></p>
<h2 id="v-bind"><a href="#v-bind" class="headerlink" title="v-bind"></a>v-bind</h2><ol>
<li><em>v-bind</em> 是Vue中提供的用于绑定属性的指令</li>
<li><em>v-bind</em> 可以被简写为   <strong>:要绑定的属性</strong></li>
<li><em>v-bind</em> 中，可以写合法的JS表达式</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"test2"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-bind:placeholder</span>=<span class="string">"message"</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-bind:placeholder</span>=<span class="string">"message"</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">:placeholder</span>=<span class="string">"message + 'Study'"</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> test2 = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">            el: <span class="string">'#test2'</span>,</span></span><br><span class="line"><span class="undefined">            data: &#123;</span></span><br><span class="line"><span class="javascript">                message: <span class="string">'Hello Vue.js!'</span></span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined">        &#125;)</span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>结果如下所示：</strong></p>
<p><img src="\blog\img\vue\2.png" alt></p>
<h2 id="v-on"><a href="#v-on" class="headerlink" title="v-on"></a>v-on</h2><ol>
<li><em>v-on</em> 是Vue的事件绑定机制，绑定的属性里面不能直接写方法内容。</li>
<li>需要在methods里面定义当前Vue所用到的可用方法</li>
<li>可以被简写为   <strong>@要绑定的属性</strong></li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"test3"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"测试"</span> <span class="attr">v-on:click</span>=<span class="string">"show"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> test3 = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">        el: <span class="string">"#test3"</span>,</span></span><br><span class="line"><span class="undefined">        data: &#123;&#125;,</span></span><br><span class="line"><span class="undefined">        methods: &#123;</span></span><br><span class="line"><span class="javascript">            show: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">                alert(<span class="string">"Hello Vuee.js!"</span>);</span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined">        &#125;</span></span><br><span class="line"><span class="undefined">    &#125;)</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="1、事件修饰符"><a href="#1、事件修饰符" class="headerlink" title="1、事件修饰符"></a>1、事件修饰符</h3><p>事件的冒泡行为，在默认情况下，点击button按钮触发事件以后，会继续触发外层div上的事件，这种行为简称为冒泡行为。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"../vue-2.6.10.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined">		div&#123;</span></span><br><span class="line"><span class="undefined">			height: 9.375rem;</span></span><br><span class="line"><span class="undefined">			background-color: blueviolet;</span></span><br><span class="line"><span class="undefined">		&#125;</span></span><br><span class="line"><span class="undefined">	</span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 事件的冒泡行为,点击button时会触发div的事件，输出结果如下所示：</span></span><br><span class="line"><span class="comment">		 btn的事件</span></span><br><span class="line"><span class="comment">		 Div的事件</span></span><br><span class="line"><span class="comment">		 --&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span> @<span class="attr">click</span>=<span class="string">"divTest"</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"戳我"</span> @<span class="attr">click</span>=<span class="string">"btnTest"</span>/&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> test = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">				el: <span class="string">'#app'</span>,</span></span><br><span class="line"><span class="undefined">				data: &#123;&#125;,</span></span><br><span class="line"><span class="undefined">				methods:&#123;</span></span><br><span class="line"><span class="undefined">					divTest()&#123;</span></span><br><span class="line"><span class="javascript">						<span class="built_in">console</span>.log(<span class="string">"Div的事件"</span>);</span></span><br><span class="line"><span class="undefined">					&#125;,</span></span><br><span class="line"><span class="undefined">					btnTest()&#123;</span></span><br><span class="line"><span class="javascript">						<span class="built_in">console</span>.log(<span class="string">"btn的事件"</span>);</span></span><br><span class="line"><span class="undefined">					&#125;</span></span><br><span class="line"><span class="undefined">				&#125;</span></span><br><span class="line"><span class="undefined">			&#125;)</span></span><br><span class="line"><span class="undefined">		</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<hr>
<ul>
<li><font color="#8A2BE2"><em>.stop</em></font> 阻止事件的冒泡行为</li>
<li><font color="#8A2BE2"><em>.privent</em></font> 阻止默认事件的触发</li>
<li><font color="#8A2BE2"><em>.capture</em></font> 实现捕获触发事件的机制，不懂可以看例子</li>
<li><font color="#8A2BE2"><em>.self</em></font>  实现只有点击元素本身才会触发事件</li>
<li><font color="#8A2BE2"><em>.once</em></font>  实现事件只触发一次</li>
</ul>
<p>.self 只会阻止自身冒泡事件触发，.stop 阻止外层所有冒泡事件</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- .stop 阻止事件的冒泡行为,点击button输出结果如下所示：</span></span><br><span class="line"><span class="comment">	btn的事件</span></span><br><span class="line"><span class="comment">--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span> @<span class="attr">click</span>=<span class="string">"divTest"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"戳我"</span> @<span class="attr">click.stop</span>=<span class="string">"btnTest"</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- .privent 阻止事件的默认行为,点击文字结果如下所示：</span></span><br><span class="line"><span class="comment">	不会跳转到百度网页，会调用btnTest方法</span></span><br><span class="line"><span class="comment">--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"https://www.baidu.com"</span> @<span class="attr">click.privent</span>=<span class="string">"btnTest"</span>&gt;</span>戳一戳，去找百度<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- .capture 实现捕获触发事件的机制,和冒泡行为相反，点击button输出结果如下所示：</span></span><br><span class="line"><span class="comment">    Div的事件	</span></span><br><span class="line"><span class="comment">    btn的事件</span></span><br><span class="line"><span class="comment">--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span> @<span class="attr">click.capture</span>=<span class="string">"divTest"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">value</span>=<span class="string">"戳我"</span> @<span class="attr">click</span>=<span class="string">"btnTest"</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="v-model（双向数据绑定）"><a href="#v-model（双向数据绑定）" class="headerlink" title="v-model（双向数据绑定）"></a>v-model（双向数据绑定）</h2><p>一般情况下，修改数据时只会从data里面同步到浏览器页面，如果在浏览器页面修改数据，并不会吧数据同步到data里面去，称之为单向数据同步。如果是v-model绑定的元素，可以实现数据的双向同步。<font color="#8A2BE2">只能应用于表单元素</font></p>
<p>测试代码：  </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h4</span>&gt;</span>&#123;&#123;message&#125;&#125;<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">v-model</span>=<span class="string">"message"</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> test = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">            el: <span class="string">'#app'</span>,</span></span><br><span class="line"><span class="undefined">            data: &#123;</span></span><br><span class="line"><span class="javascript">                message: <span class="string">'Hello Vue.js!'</span></span></span><br><span class="line"><span class="undefined">            &#125;</span></span><br><span class="line"><span class="undefined">        &#125;)</span></span><br><span class="line"><span class="undefined">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="使用class样式"><a href="#使用class样式" class="headerlink" title="使用class样式"></a>使用class样式</h2><p>使用方法，以及问题如下所示：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>使用class样式<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"../vue-2.6.10.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined">		.red &#123;</span></span><br><span class="line"><span class="undefined">			color: gold;</span></span><br><span class="line"><span class="undefined">		&#125;</span></span><br><span class="line"><span class="undefined"></span></span><br><span class="line"><span class="undefined">		.b_blue &#123;</span></span><br><span class="line"><span class="undefined">			background-color: blueviolet;</span></span><br><span class="line"><span class="undefined">		&#125;</span></span><br><span class="line"><span class="undefined">	</span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- 使用数组的形式 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h1</span> <span class="attr">:class</span>=<span class="string">"['red','b_blue']"</span>&gt;</span>&#123;&#123;message&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"></span><br><span class="line">			<span class="comment">&lt;!-- 三元表达式 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h1</span> <span class="attr">:class</span>=<span class="string">"[flag?'red':'b_blue']"</span>&gt;</span>&#123;&#123;message&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"></span><br><span class="line">			<span class="comment">&lt;!-- 数组嵌套对象，对象可以不使用引号 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h1</span> <span class="attr">:class</span>=<span class="string">"[&#123;red:flag&#125;]"</span>&gt;</span>&#123;&#123;message&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"></span><br><span class="line">			<span class="comment">&lt;!-- 直接使用对象 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h1</span> <span class="attr">:class</span>=<span class="string">"&#123;red:flag&#125;"</span>&gt;</span>&#123;&#123;message&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">h1</span> <span class="attr">:class</span>=<span class="string">"opt"</span>&gt;</span>&#123;&#123;message&#125;&#125;<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> test = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">				el: <span class="string">'#app'</span>,</span></span><br><span class="line"><span class="undefined">				data: &#123;</span></span><br><span class="line"><span class="javascript">					message: <span class="string">'Hello Vue.js!'</span>,</span></span><br><span class="line"><span class="javascript">					flag: <span class="literal">true</span>,</span></span><br><span class="line"><span class="undefined">					opt: &#123;</span></span><br><span class="line"><span class="javascript">						red: <span class="literal">true</span></span></span><br><span class="line"><span class="javascript">					&#125; <span class="comment">//可以不使用引号,调用样式,但是后面不能使用flag,会报错</span></span></span><br><span class="line"><span class="undefined">				&#125;</span></span><br><span class="line"><span class="undefined">			&#125;)</span></span><br><span class="line"><span class="undefined">		</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="内联样式"><a href="#内联样式" class="headerlink" title="内联样式"></a>内联样式</h2><h3 id="1、直接在元素上通过-style的形式，书写样式对象"><a href="#1、直接在元素上通过-style的形式，书写样式对象" class="headerlink" title="1、直接在元素上通过:style的形式，书写样式对象"></a>1、直接在元素上通过<code>:style</code>的形式，书写样式对象</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">:style</span>=<span class="string">"&#123;color:'red','font-size':'30px'&#125;"</span>&gt;</span>Hello Vue.js!<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="2、将样式对象定义到data中，并直接引用到-style中"><a href="#2、将样式对象定义到data中，并直接引用到-style中" class="headerlink" title="2、将样式对象定义到data中，并直接引用到:style中"></a>2、将样式对象定义到<code>data</code>中，并直接引用到<code>:style</code>中</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 定义样式 --&gt;</span></span><br><span class="line">data: &#123;</span><br><span class="line">    <span class="comment">&lt;!-- 对象就是无序的键值对的集合 --&gt;</span></span><br><span class="line">    styleObj:&#123;</span><br><span class="line">    color: 'red',</span><br><span class="line">    'font-size':'40px',</span><br><span class="line">    'font-weight':'200'</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 调用样式对象 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">:style</span>=<span class="string">"styleObj"</span>&gt;</span>Hello Vue.js!<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="3、通过数组，将多个样式对象引用到-style中"><a href="#3、通过数组，将多个样式对象引用到-style中" class="headerlink" title="3、通过数组，将多个样式对象引用到:style中"></a>3、通过数组，将多个样式对象引用到<code>:style</code>中</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 定义样式 --&gt;</span></span><br><span class="line">data: &#123;</span><br><span class="line">    <span class="comment">&lt;!-- 对象就是无序的键值对的集合 --&gt;</span></span><br><span class="line">    styleObj1: &#123;</span><br><span class="line">    color: 'red',</span><br><span class="line">    'font-size':'40px'</span><br><span class="line">    &#125;,</span><br><span class="line">    styleObj2: &#123;</span><br><span class="line">    'font-weight':'200'</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">h1</span> <span class="attr">:style</span>=<span class="string">"[styleObj1,styleObj2]"</span>&gt;</span>Hello Vue.js!<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="v-for和key属性"><a href="#v-for和key属性" class="headerlink" title="v-for和key属性"></a>v-for和key属性</h2><p>基本用法，遍历数组、对象数组、对象、数字。<font color="#FF0000"><em>迭代数字时，注意值和索引起始位置是不一样的</em></font></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">title</span>&gt;</span>v-for<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"../vue-2.6.10.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span></span><br><span class="line">			<span class="comment">&lt;!-- 遍历普通数组 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">"(item,index) in list"</span>&gt;</span>索引：&#123;&#123;index&#125;&#125;--数组值：&#123;&#123;item&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line">			<span class="comment">&lt;!-- 遍历对象数组 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">"(item,index) in objList"</span>&gt;</span>索引：&#123;&#123;index&#125;&#125;---id：&#123;&#123;item.id&#125;&#125;---name：&#123;&#123;item.name&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line">			<span class="comment">&lt;!-- 遍历对象 --&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">"(value,key,index) in obj"</span>&gt;</span>索引：&#123;&#123;index&#125;&#125;---对象键：&#123;&#123;key&#125;&#125;---对象值：&#123;&#123;value&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line">			<span class="comment">&lt;!-- 迭代数字--&gt;</span></span><br><span class="line">			<span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">"(item,index) in 10"</span>&gt;</span>索引：&#123;&#123;index&#125;&#125;---值：&#123;&#123;item&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">		<span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="javascript">			<span class="keyword">var</span> test = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">				el: <span class="string">'#app'</span>,</span></span><br><span class="line"><span class="undefined">				data: &#123;</span></span><br><span class="line"><span class="undefined">					list: [1, 2, 3, 4, 5],</span></span><br><span class="line"><span class="undefined">					objList: [&#123;</span></span><br><span class="line"><span class="undefined">						id: 1,</span></span><br><span class="line"><span class="javascript">						name: <span class="string">'Tom'</span></span></span><br><span class="line"><span class="undefined">					&#125;, &#123;</span></span><br><span class="line"><span class="undefined">						id: 2,</span></span><br><span class="line"><span class="javascript">						name: <span class="string">'Jane'</span></span></span><br><span class="line"><span class="undefined">					&#125;],</span></span><br><span class="line"><span class="undefined">					obj: &#123;</span></span><br><span class="line"><span class="undefined">						id: 1,</span></span><br><span class="line"><span class="javascript">						name: <span class="string">"xiaomi"</span>,</span></span><br><span class="line"><span class="undefined">						age: 10,</span></span><br><span class="line"><span class="javascript">						sex: <span class="string">"man"</span></span></span><br><span class="line"><span class="undefined">					&#125;</span></span><br><span class="line"><span class="undefined">				&#125;</span></span><br><span class="line"><span class="undefined">			&#125;)</span></span><br><span class="line"><span class="undefined">		</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>简单地说，在遍历对象数组时，key就像是给上面遍历的标签<code>&lt;p&gt;</code>加上一个唯一的属性，如果不加key属性，系统会默认使用index作为一个唯一的属性，这么这时候就有一个问题，如果你在数组中插入数据，那么就会对原来的数据顺序造成破坏，此时key属性以最新的值标记数据，进而造成其他数据的混乱。</p>
<ul>
<li>v-for循环的时候，key属性只能使用<em>number</em>或者<em>string</em></li>
<li>key在使用的时候，必须使用 v- 属性绑定的形式，指定key的值</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">v-for</span>=<span class="string">"(item,index) in objList"</span> <span class="attr">:key</span>=<span class="string">"item.id"</span>&gt;</span>id：&#123;&#123;item.id&#125;&#125;---name：&#123;&#123;item.name&#125;&#125;<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="v-if-和-v-show"><a href="#v-if-和-v-show" class="headerlink" title="v-if 和 v-show"></a>v-if 和 v-show</h2><ul>
<li><font color="#8A2BE2"><em>v-if</em></font> 每次改变都会重新创建和删除元素</li>
<li><font color="#8A2BE2"><em>v-show</em></font> 不会重新创建和删除元素，只是切换元素的 <code>display:none</code> 样式</li>
<li><font color="#8A2BE2"><em>v-if</em></font> 经常切换时，消耗较高的性能，频繁的切换不推荐使用 <code>v-if</code></li>
<li><font color="#8A2BE2"><em>v-show</em></font>  初始化渲染消耗比较大，频繁切换显示隐藏时，使用这个。只显示一两次，或者不想给用户看到时建议使用<code>v-if</code></li>
</ul>

    </div>
    <p class="post-meta">
        <span class="post-cat">分类：
            <a class="cat-link" href="/blog/categories/Vue/">Vue</a>
        </span>
        <span class="post-tags">
            标签：
            
    
        <a href="/blog/tags/Vue/" title="Vue">Vue</a>
    

        </span>
    </p>
</article>
<!-- 分享按钮 -->

  <div class="article-share clearfix text-center">
    <div class="share-area">
      <span class="share-txt">分享到：</span>
      <a href="javascript: window.open('http://service.weibo.com/share/share.php?url=' + encodeURIComponent(location.href) + '&title=' + document.title + '&language=zh_cn');" class="share-icon weibo"></a>
      <a href="javascript: alert('请复制链接到微信并发送');" class="share-icon wechat"></a>
      <a href="javascript: window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + encodeURIComponent(location.href) + '&title=' + document.title);" class="share-icon qqzone"></a>
      <a href="javascript: window.open('http://connect.qq.com/widget/shareqq/index.html?url=' + encodeURIComponent(location.href) + '&desc=Jelon个人博客&title=' + document.title + '&callback=' + encodeURIComponent(location.href));" class="share-icon qq"></a>
      <a href="javascript: window.open('http://shuo.douban.com/!service/share?href=' + encodeURIComponent(location.href) + '&name=' + document.title + '&text=' + document.title);" class="share-icon douban"></a>
    </div>
  </div>


<!-- 上一篇/下一篇 -->

<div class="article-nav clearfix">
    
    <span class="prev fl">
        上一篇<br>
        <a href="/blog/2019/05/20/Vue/4-按键修饰符/">
            
                按键修饰符以及自定义按键修饰符
            
        </a>
    </span>
    

    
    <span class="next fr">
        下一篇<br>
        <a href="/blog/2019/05/20/Vue/1-v-cloak注意点/">
            
                v-cloak 的作、用法和常见文图问题解决办法
            
        </a>
    </span>
    
</div>

<!-- 文章评论 -->

  <script src="/blog/js/comment.js"></script>
  <div id="comments" class="comment">
    <!--
    <div class="sign-bar">
      GitHub 已登录!
      <span class="sign-link">登出</span>
    </div>
    <section class="box">
      <div class="com-avatar"><img src="/blog/logo.png" alt="avatar"></div>
      <div class="com-text">
        <div class="main">
          <textarea class="text-area-edited show" placeholder="欢迎评论！"></textarea>
          <div class="text-area-preview"></div>
        </div>
        <div class="switch">
          <div class="switch-item on">编辑</div>
          <div class="switch-item">预览</div>
        </div>
        <div class="button">提交</div>
      </div>
    </section>
    <section class="tips">注：评论支持 markdown 语法！</section>
    <section class="list-wrap">
      <ul class="list">
        <li>
          <div class="user-avatar">
            <a href="/">
              <img src="/img/jelon.jpg" alt="user-avatar">
            </a>
          </div>
          <div class="user-comment">
            <div class="user-comment-header">
              <span class="post-name">张德龙</span>
              <span class="post-time">2017年12月12日</span>
              <span class="like liked">已赞</span>
              <span class="like-num">2</span>
            </div>
            <div class="user-comment-body">333333</div>
          </div>
        </li>
        <li>
          <div class="user-avatar">
            <a href="/">
              <img src="/img/jelon.jpg" alt="user-avatar">
            </a>
          </div>
          <div class="user-comment">
            <div class="user-comment-header">
              <span class="post-name">刘德华</span>
              <span class="post-time">2017年12月12日</span>
              <span class="like">点赞</span>
              <span class="like-num">2</span>
            </div>
            <div class="user-comment-body">vvvvv</div>
          </div>
        </li>
      </ul>
      <div class="page-nav">
        <a href="javascript: void(0);" class="item">1</a>
        <a href="javascript: void(0);" class="item">2</a>
        <a href="javascript: void(0);" class="item current">3</a>
      </div>
    </section>
    -->
  </div>
  <script>
  JELON.Comment({
    container: 'comments',
    label: 'Vue/1-常用指令' || '2019/05/20/Vue/1-常用指令/',
    owner: 'fxiaoyu97',
    repo: 'blog_comment',
    clientId: 'fxiaoyu97',
    clientSecret: 'Fsy1179006580@'
  });
  </script>


            </div>

        </section>
        <!-- 侧栏部分 -->
<aside class="sidebar">
    <section class="widget">
        <h3 class="widget-hd"><strong>文章分类</strong></h3>
        <!-- 文章分类 -->
<ul class="widget-bd">
    
    <li>
        <a href="/blog/categories/IDEA/">IDEA</a>
        <span class="badge">(1)</span>
    </li>
    
    <li>
        <a href="/blog/categories/Nginx/">Nginx</a>
        <span class="badge">(1)</span>
    </li>
    
    <li>
        <a href="/blog/categories/地图/">地图</a>
        <span class="badge">(1)</span>
    </li>
    
    <li>
        <a href="/blog/categories/Java/">Java</a>
        <span class="badge">(6)</span>
    </li>
    
    <li>
        <a href="/blog/categories/Maven/">Maven</a>
        <span class="badge">(2)</span>
    </li>
    
    <li>
        <a href="/blog/categories/web前端/">web前端</a>
        <span class="badge">(2)</span>
    </li>
    
    <li>
        <a href="/blog/categories/Vue/">Vue</a>
        <span class="badge">(31)</span>
    </li>
    
    <li>
        <a href="/blog/categories/Lucene/">Lucene</a>
        <span class="badge">(1)</span>
    </li>
    
    <li>
        <a href="/blog/categories/SpringBoot/">SpringBoot</a>
        <span class="badge">(10)</span>
    </li>
    
    <li>
        <a href="/blog/categories/Exception/">Exception</a>
        <span class="badge">(1)</span>
    </li>
    
    <li>
        <a href="/blog/categories/MySQL/">MySQL</a>
        <span class="badge">(2)</span>
    </li>
    
    <li>
        <a href="/blog/categories/Spring/">Spring</a>
        <span class="badge">(1)</span>
    </li>
    
</ul>
    </section>

    
    <section class="widget">
        <h3 class="widget-hd"><strong>热门标签</strong></h3>
        <!-- 文章标签 -->
<div class="widget-bd tag-wrap">
  
    <a class="tag-item" href="/blog/tags/IDEA/" title="IDEA">IDEA (1)</a>
  
    <a class="tag-item" href="/blog/tags/快捷键/" title="快捷键">快捷键 (1)</a>
  
    <a class="tag-item" href="/blog/tags/Nginx/" title="Nginx">Nginx (1)</a>
  
    <a class="tag-item" href="/blog/tags/地图/" title="地图">地图 (1)</a>
  
    <a class="tag-item" href="/blog/tags/log4j/" title="log4j">log4j (1)</a>
  
    <a class="tag-item" href="/blog/tags/正则/" title="正则">正则 (1)</a>
  
    <a class="tag-item" href="/blog/tags/JFrame/" title="JFrame">JFrame (1)</a>
  
    <a class="tag-item" href="/blog/tags/爬虫/" title="爬虫">爬虫 (2)</a>
  
    <a class="tag-item" href="/blog/tags/Java/" title="Java">Java (6)</a>
  
    <a class="tag-item" href="/blog/tags/字符串/" title="字符串">字符串 (1)</a>
  
    <a class="tag-item" href="/blog/tags/Maven/" title="Maven">Maven (2)</a>
  
    <a class="tag-item" href="/blog/tags/JavaScript/" title="JavaScript">JavaScript (1)</a>
  
    <a class="tag-item" href="/blog/tags/Vue/" title="Vue">Vue (31)</a>
  
    <a class="tag-item" href="/blog/tags/WebMagic/" title="WebMagic">WebMagic (1)</a>
  
    <a class="tag-item" href="/blog/tags/web前端/" title="web前端">web前端 (3)</a>
  
    <a class="tag-item" href="/blog/tags/HTML/" title="HTML">HTML (1)</a>
  
    <a class="tag-item" href="/blog/tags/webpack/" title="webpack">webpack (12)</a>
  
    <a class="tag-item" href="/blog/tags/Lucene/" title="Lucene">Lucene (1)</a>
  
    <a class="tag-item" href="/blog/tags/SpringBoot/" title="SpringBoot">SpringBoot (9)</a>
  
    <a class="tag-item" href="/blog/tags/注解/" title="注解">注解 (2)</a>
  
    <a class="tag-item" href="/blog/tags/yml/" title="yml">yml (2)</a>
  
    <a class="tag-item" href="/blog/tags/Exception/" title="Exception">Exception (1)</a>
  
    <a class="tag-item" href="/blog/tags/Mysql/" title="Mysql">Mysql (1)</a>
  
    <a class="tag-item" href="/blog/tags/MySQL/" title="MySQL">MySQL (2)</a>
  
    <a class="tag-item" href="/blog/tags/Spring/" title="Spring">Spring (1)</a>
  
    <a class="tag-item" href="/blog/tags/Mybatis/" title="Mybatis">Mybatis (1)</a>
  
</div>
    </section>
    

    

    
</aside>
<!-- / 侧栏部分 -->
    </div>

    <!-- 博客底部 -->
    <footer class="footer">
    &copy;
    
        2016-2019
    

    <a href="/blog/">Todou Loves You</a>
</footer>
<div class="back-to-top" id="JELON__backToTop" title="返回顶部">返回顶部</div>

    <!--博客js脚本 -->
    <!-- 这里放网站js脚本 -->
<script src="/blog/js/main.js"></script>
</body>
</html>